<template>
	<view class="content">
		<view class="login-mask" v-if="!isLogin">
			<view class="top-bg">
				<view class="logo-box">
					<image src="../../static/images/logo.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="login-box">
				<view class="inp-box">
					<view class="tl">账号</view>
					<view class="input">
						<input type="text" @input="editInput" @blur="editInput" v-model="username">
					</view>
				</view>
				<view class="inp-box">
					<view class="tl">密码</view>
					<view class="input">
						<input type="password" v-model="userPwd">
					</view>
				</view>
				<button @click="login" class="login-btn">立即登录</button>
			</view>
		</view>
		
		<view class="search-input-top">
			<view class="logout-btn" @click="logout">
				<image src="../../static/images/logout.png" mode="widthFix"></image>
			</view>
			<view class="input-box">
				<input type="text" confirm-type="search" @confirm="searchClassImgs" v-model="keyword">
				<icon type="search" size="16"/>
			</view>
			
			 <picker @change="classChange" :value="ind0" :range="classArr" range-key="ClassName">
				 <view class="class-picker-box">
					<view class="uni-input">{{classArr[ind0].ClassName}}</view>
					<view class="down-icon">
						<image src="../../static/images/down.png" mode="widthFix"></image>
					</view>
				</view>
			</picker>
			
		</view>
		
		<scroll-view class="result-scroll-box" scroll-y="true" >
			<view class="search-result-box">
				<view  @click="preView(index)" class="imgbox" v-for="(item,index) in imgsArr" :key="item.ImgId">
					<image :src="item.SmallImgUrl" mode="aspectFill"></image>
					<view class="text">{{item.Title}}</view>
				</view>
			</view>
		</scroll-view>
		
	<!-- 	<scroll-view scroll-y="true" class="err-box">
			<view class="err" v-for="(item,ind) in err" :key="ind">{{item}}</view>
		</scroll-view> -->
		<view class="toast-mask" v-if="isToast">
			<view class="toast-box">{{toastMsg}}</view>
		</view>
	</view>
</template>

<script>
	var preViewImgs = [];
	export default {
		data() {
			return {
				domain:getApp().globalData.domain,
				title: 'Hello',
				username:'',
				userPwd:'',
				keyword:'',
				ind0:0,
				imgsArr:[],
				classArr:[],
				err:[],
				toastMsg:'',
				isToast:false
			}
		},
		computed:{
			isLogin() {
				var t = this;
				console.log(t.$store.state.isLogin)
				// t.err.push('登录状态：' + t.$store.state.isLogin);
				return t.$store.state.isLogin
			}
		},
		onLoad() {
			this.getAllClass();
		},
		methods: {
			diyShowToast (tl) {
				var t = this;
				t.isToast = true;
				t.toastMsg = tl;
				setTimeout(()=> {
					t.isToast = false;
					t.toastMsg = '';
				},1000)
			},
			editInput(e) {
				var t = this;
				console.log(e.detail.value);
				console.log(e.detail.value.replace(/[\W]/g,''));
				 // replace(/[\W]/g,'')
				 t.username = e.detail.value.replace(/[\W]/g,'');
				 
				 
			},
			logout() {
				let t = this;
				t.$store.commit("setLogin",false);
				uni.removeStorage({
					key:"loginToken"
				})
			},
			login() {
				let appSecret = 'd3601f6b2a46ea55cf46b79ab1c6dce8';
				let appId = 'wx022a2117b6e96eb3';
				let t = this;
				
				uni.request({
					url:t.domain + '/ajax/api.aspx',
					data:{
						action:'Login',
						username:t.username,
						userPwd:t.userPwd
					},
					success: (res2) => {
						console.log(res2);
						// t.err.push('登录接口:success'+JSON.stringify(res2))
						
						// t.err.push('登录后得token：' + token);
						if(res2.data.result == 'ok') {
							let token = res2.data.token;
							t.$store.commit("setLogin",true)
							uni.setStorage({
								key:'loginToken',
								data:token,
								success: (res3) => {
									t.getAllClass();
								}
							})
						}else {
							this.diyShowToast(res2.data.msg);
						}
					},
					fail: (err2) => {
						// t.err.push('登录接口:fail'+JSON.stringify(err))
						this.diyShowToast(res2.data.msg);
						console.log(err2)
					}
				})
				
				return 
				uni.login({
					provider:'weixin',
					success:(res) => {
						console.log(res)
						if(res.errMsg == 'login:ok') {
							uni.request({
								url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + appSecret + '&js_code=' + res.code + '&grant_type=authorization_code',
								data: {},
								header: {
								  'content-type': 'json'
								},success: (res) => {
									console.log(res);
									let {data,errMsg} = res;
									if(errMsg == 'request:ok') {
										uni.request({
											url:t.domain + '/ajax/api.aspx',
											data:{
												action:'Login',
												openid:data.openid,
												username:t.username,
												userPwd:t.userPwd
											},
											success: (res2) => {
												console.log(res2);
												t.err.push('登录接口:success'+JSON.stringify(res2))
												let {token,result} = res2.data;
												console.log(token)
												t.err.push('登录后得token：' + token);
												if(result == 'ok') {
													t.$store.commit("setLogin",true)
													uni.setStorage({
														key:'loginToken',
														data:token,
														success: (res3) => {
															t.getAllClass();
														}
													})
												}
											},
											fail: (err2) => {
												t.err.push('登录接口:fail'+JSON.stringify(err))
												console.log(err2)
											}
										})
									}
								},
								fail: (err) => {
									// t.err.push('获取oppenid:fail'+JSON.stringify(err))
									console.log(err)
								}
							})
						}
					},
					fail:(err) => {
						// t.err.push('wx.login:fail'+JSON.stringify(err))
						console.log(err)
					}
				})
			},
			getAllData() {
				
				
			},
			getAllImg () {
				let t = this;
				t.$http("/ajax/api.aspx",{
					action:'getAllPics',
					keyword:t.keyword == '' ? '全部' : t.keyword
				}).then((res)=> {
					console.log(res)
					let {data,result} = res.data;
					if(result == 'ok') {
						t.imgsArr = data;
						preViewImgs = [];
						for(let i = 0; i < data.length; i++) {
							preViewImgs.push(data[i].BigImgUrl+'?id='+data[i].ImgId);
							console.log(preViewImgs)
						}
					}else{
						t.$store.commit("setLogin",false);
						uni.removeStorage({
							key:'loginToken'
						})
					}
				})
			},
			getAllClass() {
				let t = this;
				t.$http("/ajax/api.aspx",{
					action:'getClass'
				}).then((res)=> {
					console.log('获取分类');
					console.log(res);
					let {data,result} = res.data;
					if(result == 'ok') {
						data.unshift({ClassID:0,ClassName:'全部'});
						t.classArr = data;
					}else {
						t.$store.commit("setLogin",false);
						uni.removeStorage({
							key:'loginToken'
						})
					}
				})
			},
			classChange(e) {
				console.log(e);
				let t = this;
				t.ind0 = e.detail.value;
				
				t.getClassImgs();
			},
			getClassImgs () {
				let t = this;
				t.$http("/ajax/api.aspx",{
					action:'getPicsByClassId',
					keyword:t.keyword == '' ? '全部' : t.keyword,
					classId: t.classArr[t.ind0].ClassID,
				}).then((res)=> {
					console.log(res);
					let {data,result} = res.data;
					if(result == 'ok') {
						t.imgsArr = data;
						preViewImgs = [];
						for(let i = 0; i < data.length; i++) {
							preViewImgs.push(data[i].BigImgUrl+'?id='+data[i].ImgId);
							console.log(preViewImgs)
						}
					}else{
						t.$store.commit("setLogin",false);
						uni.removeStorage({
							key:'loginToken'
						})
					}
				})
			},
			preView(ind) {
				console.log(preViewImgs.length)
				uni.previewImage({
					current:preViewImgs[ind],
					urls:preViewImgs
				})
			},
			searchClassImgs() {
				let t = this;
				t.ind0 = 0;
				t.getAllImg();
			}
		}
	}
</script>

<style lang="less">
	@mcolor: #bb402e;
	
	.toast-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999999999;
		.toast-box {
			position: absolute;
			max-width: 90%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			padding: 30rpx;
			background: rgba(0,0,0,.8);
			color: #fff;
			font-size: 32rpx;
			line-height: 44rpx;
			border-radius: 10rpx; 
		}
	}
	.err-box {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 600rpx;
		font-size: 24rpx;
		line-height: 32rpx;
		background: #fff;
		width: 100%;
		z-index: 9999999999;
		.err{
			margin-bottom: 10rpx;
		}
	}
	page {
		min-height: 100%;
	}
	.content {
		min-height: 100%;
	}
	.login-mask {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.top-bg {
		background: @mcolor;
		padding:100rpx 0 120rpx;
		.logo-box {
			width: 300rpx;
			margin: 0 auto;
			image {
				width: 100%;
			}
		}
	}
	
	.login-box {
		width: 690rpx;
		margin: -60rpx auto 0 auto;
		box-shadow: 0px -1px 6px 6px rgba(0, 0, 0, 0.08);
		background: #fff;
		border-radius: 10rpx;
		padding: 40rpx 30rpx 120rpx 30rpx;
		.inp-box {
			margin-bottom: 30rpx;
			border-bottom: 1px solid #eee;
		}
		.tl {
			font-size: 28rpx;
			color: @mcolor;
		}
		input {
			border:none;
			height: 100rpx;
			color: #333;
			font-size: 28rpx;
		}
		.login-btn {
			margin-top: 60rpx;
			color: #fff;
			font-size: 32rpx;
			background: @mcolor;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;	
			font-weight: 500;
		}
	}
	
	
	
	.search-input-top {
		padding: 30rpx;
		display: flex;
		.logout-btn{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.input-box {
			width: 450rpx;
			position: relative;
			margin-right: 20rpx;
			input {
				width: 100%;
				padding: 0 10px 0 40px;
				height: 60rpx;
				border: none;
				background: #e8e8e8;
				border-radius: 30rpx;
				font-size: 28rpx;
			} 
			icon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 18rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.class-picker-box {
			width: 140rpx;
			border-radius: 30rpx;
			padding-right: 10rpx;
			height: 60rpx;
			display: flex;
			font-size: 14px;
			justify-content: flex-end;
			align-items: center;
			font-size: 24rpx;
			border: 1rpx solid #e5e5e5;
			.down-icon {
				width: 32rpx;
				height: 32rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.search-result-box {
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		.imgbox {
			width: 150rpx;
			margin: 0 30rpx 30rpx 0;
			.text {
				font-size: 20rpx;
				text-align: center;
				line-height: 26rpx;
				height: 52rpx;
				overflow: hidden;
			}
		}
		image {
			width: 100%;
			height: 150rpx;
			margin-bottom: 16rpx;
			
		}
		.imgbox:nth-child(4n) {
			margin-right: 0;
		}
	}
	
	.result-scroll-box {
		height: calc(~"100vh - 120rpx");
	}
</style>
